<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型2</title>
    <style>
        #my{width:300px;
            height:100px;
            background-color: #18b8b2;
            /*padding-top: 10px;
            padding-right: 20px;
            padding-left: 20px;
            padding-bottom: 30px;
            padding:10px 20px 20px 30px*/}
/*内边距   属性：padding-top、padding-right、padding-left、padding-bottom、padding    功能：设置元素内容区域与边框之间的距离
使用方法：padding-top: 10px;    padding-right: 20px;    padding-left: 20px;    padding-bottom: 30px;    （上）padding：10px*/
        .you{background-color: #fafa;
        margin:0 10px}
        div span{color: red;margin: 0 5px;}
        ul{list-style-type: none;}
        ul li{display: inline-block;
        width:100px;height:40px;padding:5px;text-align: center;line-height: 40px;}
        ul li:hover{color:rgb(150, 92, 164);background-color:#acac}
    </style>
</head>
<body>
    <div id="my">
        期待kikuk千香引姜黎非,期待待播剧花间令、仙剑奇侠传四！
    </div>
    <div class="you">
        鞠姐在B站跨年唱跳仙剑四的曲目.<a href="#" class="you">恋爱告急</a>
    </div>
    <div>
        共<span>999</span>条消息
    </div>
    <ul>
        <li>芸汐传</li>
        <li>花戎</li>
        <li>仙剑奇侠传四</li>
        <li>千香引</li>
    </ul>
</body>
</html>